import React, { useState, useContext, useEffect, useCallback, useSelector } from 'react'
import VoteMain from './VoteMain'
import VoteFooter from './VoteFooter'
import '../Demo.less'
import ThemeContext from './ThemeContext'

export default function Vote() {
  const store = useContext(ThemeContext)
  // const {store}=useContext(ThemeContext) //这个方法会报错

  let { supNum, oppNum } = store.getState();

  // 控制视图更新的办法加入到redux事件池中
  // let [_, setRandom] = useState(0);
  let [num,setNum]=useState(0)

  const update = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    let unsubscribe = store.subscribe(update)
    return ()=>{
      unsubscribe()
    }
  },[num])

  const change = useCallback(type => {
    // if (type === 'sup') {
    //   setSupNum(supNum + 1)
    //   return;
    // }
    // setOppNum(oppNum + 1)
  })

  return (
    <div className='vote-box'>
      <header className="header">
        <h2 className="title">React真的很不错!!</h2>
        <span className="num">总共：{supNum + oppNum}人</span>
      </header>

      <VoteMain supNum={supNum} oppNum={oppNum} />
      <VoteFooter change={change} />
    </div>
  )
}
